<template>
    <div class="cont">
        <div class="center">
            <div class="form-cont">
                <el-form label-position="right" label-width=".5208rem" v-model="formLabelAlign">
                    <el-form-item label="新密码">
                        <el-input v-model="formLabelAlign.password" placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="formLabelAlign.repassword" placeholder="再次密码" type="password" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="btn">
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { UpdatePass } from '../../api/user';
import { ElMessage } from 'element-plus';
import { useUser } from '../../store/user';
const formLabelAlign = reactive({
    password: '',
    repassword: '',

})
const user = useUser()
let { token } = user.userinfo
const onSubmit = () => {
    if (formLabelAlign.password != '' && formLabelAlign.repassword != "") {
        if (formLabelAlign.password === formLabelAlign.repassword) {
            UpdatePass(formLabelAlign, token).then(() => {
                ElMessage.success('密码修改成功')
                formLabelAlign.password = ''
                formLabelAlign.repassword = ''
            })
        }else{
            ElMessage.error("密码不一致")
        }
    } else {
        if (formLabelAlign.password == '') {
            ElMessage.error('新密码不能为空')
        } else {
            ElMessage.error('请再次输入密码')

        }
    }
}


</script>

<style lang="scss" scoped>
div.cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    >div.center {
        width: 4.1667rem;
        height: 2.6042rem;
        background: #FFFFFF;
        border-radius: .0521rem;
        padding-top: .3646rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        >h2 {
            font-size: .125rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            line-height: .0938rem;
            margin-bottom: .2083rem;
        }

        >.form-cont {
            width: 100%;
            padding-right: 1.0417rem;
            margin-bottom: .1667rem;
        }

        .el-form-item {
            height: .3125rem;
            align-items: center;
            justify-content: end;
        }

        .btn {
            display: flex;
            justify-content: end;
            margin-bottom: .1563rem;
            padding-right: 1.0417rem;
            width: 100%;

            .el-button {
                width: 2.0833rem;
                height: .2813rem;
                background: #3F7233;
                border-radius: .0208rem;
                font-size: .0938rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: .0938rem;
                border: 0;
            }
        }

        .updatePass {
            width: 100%;
            text-align: left;
            padding-left: 1.0417rem;
            font-size: .0729rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #999999;
            line-height: .0885rem;
            cursor: pointer;

            >i {
                color: #64B1FF;
            }
        }

    }
}
</style>

<style lang="scss">
div.form-cont {
    .el-form-item__label {
        font-size: .0833rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: .1042rem;
    }

    .el-input {
        width: 2.0833rem;
        height: .3125rem;
        background: #F8F8F8;
        border-radius: .0208rem;
    }

    .el-input__wrapper {
        width: 2.0833rem;
        height: .3125rem;
        background-color: #F8F8F8;
        padding: 0 .1563rem;
    }

    .el-input__inner {
        font-size: .0938rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: .0885rem;
        color: black;
    }

    .el-form-item__content {
        flex: 0;
        min-width: 2.0833rem;
    }
}
</style>